<template>
  <div>
    <lan-header :config="headerConfig"></lan-header>
    <lan-search-form
      size="small"
      :config="searchForm"
      :formData="searchFormData"
      @search="search"
    >
      <template #factoryUuid="scope">
        <el-select
          size="small"
          clearable
          v-model="scope.data.factoryUuid"
          filterable
          remote
          reserve-keyword
          placeholder="工厂名称"
          :remote-method="remoteFactoryListSearch"
          :loading="remoteLoading"
        >
          <el-option
            v-for="factory in factoryList"
            :key="factory.uuid"
            :label="factory.name"
            :value="factory.uuid"
          >
          </el-option>
        </el-select>
      </template>
      <template #typeUuid="scope">
        <el-select
          size="small"
          v-model="scope.data.typeUuid"
          filterable
          remote
          reserve-keyword
          placeholder="设备类型"
          :remote-method="remoteDeviceTypeSearch"
          :loading="remoteLoading"
          clearable
        >
          <el-option
            v-for="deviceType in deviceTypeList"
            :key="deviceType.uuid"
            :label="deviceType.name"
            :value="deviceType.uuid"
          ></el-option>
        </el-select>
      </template>
    </lan-search-form>
    <upload
      ref="uploadComponent"
      @refresh="search"
    ></upload>
  </div>
</template>

<script>
import Upload from './upload';
import { getActiveSelector } from './service';
import { generateSelectorData } from './service';
import lanSearchForm from '../../../components/lanSearchForm';
import lanHeader from '../../../components/lanHeader';
import { queryFactoryListApi } from '../../../api/factory';
import { queryDeviceTypeListApi } from '../../../api/deviceType';
import moment from 'moment';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { parseError } from '../../../utils';

export default {
  components: {
    lanHeader,
    lanSearchForm,
    Upload
  },
  props: {
    searchFormData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      remoteLoading: false,
      factoryList: [],
      optionStatus: [],
      deviceTypeList: [],
      activeOptionList: [
        {
          label: '可用',
          value: true
        },
        {
          label: '不可用',
          value: false
        }
      ],

      headerConfig: {
        title: '设备列表',
        buttons: [
          {
            isShow: () => this.userGuardList.includes(this.guard.DeviceManage),
            text: '删除所选',
            icon: 'el-icon-delete',
            type: 'danger',
            size: 'small',
            method: () => {
              this.deleteSelect();
            }
          },
          {
            isShow: () => this.userGuardList.includes(this.guard.DeviceManage),
            text: '新建',
            icon: 'add',
            type: 'primary',
            size: 'small',
            method: () => {
              this.showAdd();
            }
          },
          {
            isShow: () => this.userGuardList.includes(this.guard.DeviceManage),
            text: '批量导入',
            icon: 'add',
            type: 'primary',
            size: 'small',
            method: () => {
              this.showUpload();
            }
          }
        ]
      },

      searchForm: {
        inline: true,
        size: 'small',
        formList: [
          {
            name: 'factoryUuid',
            type: 'slot',
            placeholder: '工厂名称'
          },
          {
            name: 'typeUuid',
            type: 'slot',
            placeholder: '设备类型'
          },
          {
            name: 'serialNumber',
            type: 'input',
            placeholder: '序列号'
          },
          {
            name: 'name',
            type: 'input',
            placeholder: '设备名称'
          },
          {
            name: 'status',
            type: 'select',
            placeholder: '设备状态',
            options: generateSelectorData(),
            optionValue: 'value',
            optionLabel: 'label'
          },
          {
            name: 'active',
            placeholder: '是否启用',
            type: 'select',
            options: getActiveSelector(),
            optionValue: 'value',
            optionLabel: 'label'
          }
        ]
      }
    };
  },
  created() {
    this.optionStatus = generateSelectorData();
    this.remoteDeviceTypeSearch();
    this.remoteFactoryListSearch();
  },
  methods: {
    search() {
      this.$emit('search');
    },
    remoteDeviceTypeSearch(query) {
      this.remoteLoading = true;
      queryDeviceTypeListApi(query, 10)
        .then(deviceTypeList => (this.deviceTypeList = deviceTypeList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    remoteFactoryListSearch(query) {
      this.remoteLoading = true;
      queryFactoryListApi(query, 10)
        .then(factoryList => (this.factoryList = factoryList))
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    },
    showUpload() {
      this.$refs.uploadComponent.showDialog();
    },
    showAdd() {
      this.$router.push('/device/add/');
    },
    deleteSelect() {
      this.$emit('deleteSelectedDevice');
    }
  }
};
</script>

<style>
</style>
